<template>
  <div class="contain">
    <myNavbar title="添加"></myNavbar>
    <div class="contain_header">
      <text class="contain_header_title">请添加本人的收款方式</text>
      <text class="contain_header_contain">请绑定本人的收款账号</text>
    </div>
    <div class="contain_section">
      <div class="contain_section_contain"  @click="pick">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;">添加</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="display: flex;flex-direction: row;align-items: center">
            <text style="font-size: 32px;" v-if="paymentType">{{paymentType}}</text>
            <text style="font-size: 30px;color: darkgray;" v-else >请添加本人的收款方式</text>
          </div>
        </div>
        <div>
          <text class="mine-order-icon">&#xe65e;</text>
        </div>
      </div>

      <div class="contain_section_contain">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text class="contain_section_contain_title" style="font-size: 30px;"  v-if="bankInfoId == 1 || bankInfoId == 2">姓名</text>
          <text class="contain_section_contain_title" style="font-size: 30px;"  v-else>开户名</text>
        </div>
        <div class="contain_section_contain_wrap">
          <div style="flex: 1;">
              <input v-model="bankName" placeholder="姓名" class="contain_section_contain_wrap_input" maxlength='11' type="text"/>
          </div>
        </div>
      </div>
      <div class="contain_section_contain  contain_section_contain_bottom">
        <div class="contain_section_contain_text" style="justify-content: center">
          <text style="font-size: 30px" v-if="bankInfoId == 1 || bankInfoId == 2">账号</text>
          <text style="font-size: 30px" v-else>账号</text>
        </div>
        <div class="contain_section_contain_wrap" >
          <input v-if="bankInfoId == 1 " v-model="bankNum" placeholder="请输入本人微信账号" class="contain_section_contain_wrap_input" maxlength='25' type="number"/>
          <input v-else-if="bankInfoId == 2" v-model="bankNum" placeholder="请输入本人支付宝账号" class="contain_section_contain_wrap_input" maxlength='25' type="number"/>
          <input v-model="bankNum" placeholder="请输入本人银行卡" class="contain_section_contain_wrap_input" maxlength='25' type="number"/>
        </div>
      </div>
      <div class="qrcode" v-if="bankInfoId == 1 || bankInfoId == 2" >
        <text class="qrcode-text">上传收款码</text>
        <upload @metaClick="metaClick($event,index)"></upload>
      </div>
    </div>
    <div class="contain_submit" @click='addbank'>
      <div class="contain_submit_contain">
        <text class="contain_submit_title">添加</text>
      </div>
    </div>
  </div>

</template>
<script>
import myNavbar from "../../../../components/myNavbar/myNavbar.vue";
import upload from '../components/upload/upload.vue'

// import { list as memberInfo} from '@/api/shareCenter'
import { save } from '@/api/account';

const picker = weex.requireModule('picker')
export default {
  data(){
    return{
      bankInfoId:"",
      bankName:'',
      bankNum:'',
      value: 0,
      paymentType:'',
      qrcode:'',
      addbankflage:true
    }
  },
  components: { myNavbar,upload},
  created () {
    // this.createCaptcha();
  },
  mounted(){
    // this.loadPromoter();
    // this.imeiId = this.getImei()
    // this.initId()
  },
  methods:{
    metaClick($event,index){
      console.info($event,index,"9999999999999999999999999999999999999999999999")
      this.qrcode = $event.images[0]
      console.log( this.qrcode ,"8888888888888888888888888888888888888888"  )

    },
    pick(data) {
      this.imgType = data
      picker.pick({
        index:this.value,
        items: ['微信','支付宝','中国银行','宁波银行','邮政储蓄银行','建设银行','农业银行','华夏银行','北京银行','平安银行','广发银行','光大银行','兴业银行','浦发银行','中信银行','民生银行','招商银行','交通银行','工商银行']
      }, event => {
        if (event.result === 'success') {
          let items = ['微信','支付宝','中国银行','宁波银行','邮政储蓄银行','建设银行','农业银行','华夏银行','北京银行','平安银行','广发银行','光大银行','兴业银行','浦发银行','中信银行','民生银行','招商银行','交通银行','工商银行']
          this.paymentType = items[event.data]
          switch (this.paymentType) {
            case "微信":
              this.bankInfoId = 1
              break;
            case "支付宝":
              this.bankInfoId = 2
              break;
            case "中国银行":
              this.bankInfoId = 32
              break;
            case "宁波银行":
              this.bankInfoId = 33
              break;
            case "邮政储蓄银行":
              this.bankInfoId = 31
              break;
            case "建设银行":
              this.bankInfoId = 30
              break;
            case "农业银行":
              this.bankInfoId = 29
              break;
            case "华夏银行":
              this.bankInfoId = 28
              break;
            case "北京银行":
              this.bankInfoId = 26
              break;
            case "平安银行":
              this.bankInfoId = 18
              break;
            case "广发银行":
              this.bankInfoId = 17
              break;
            case "光大银行":
              this.bankInfoId = 15
              break;
            case "兴业银行":
              this.bankInfoId = 14
              break;
            case "浦发银行":
              this.bankInfoId = 13
              break;
            case "中信银行":
              this.bankInfoId = 12
              break;
            case "民生银行":
              this.bankInfoId = 11
              break;
            case "招商银行":
              this.bankInfoId = 10
              break;
            case "交通银行":
              this.bankInfoId = 9
              break;
            case "工商银行":
              this.bankInfoId = 8
              break;
            default:
              this.paymentType = '支付宝'
              this.bankInfoId = 2
          }
          console.log("1111111111111111111111111111111111111111")
          console.log(this.bankInfoId)

          // this.fileClick()
          this.value = event.data
        }
      })
    },

    addbank(){
      if( this.addbankflage == false){
        return false;
      }
      var _this = this
      if (this.isNull(_this.bankName)) {
        eeui.toast('请输入姓名')
        return;
      }
      if(this.isNull(_this.bankNum)){
        eeui.toast('请输入支付宝账号')
        return;
      }
      if( _this.bankInfoId == 2 || _this.bankInfoId == 1){
        if(this.isNull(_this.qrcode)){
          eeui.toast('请上传收款码')
          return;
        }
      }
      let params={
        bankInfoId:this.bankInfoId,
        bankName:this.bankName,
        bankNum:this.bankNum,
        qrcode:this.qrcode
      }
        save(params).then(res=>{
          this.addbankflage = false
          eeui.toast("添加成功")
          if(res.type='success'){
            setTimeout(()=>{
              eeui.closePage()
              this.$emit('getBank')
            },2000)
         }
      }).catch(repond=>{
      })

    },

  }
}
</script>
<style scoped>
input {
  background: none;
  outline: none;
  border: none;
}
.contain{
  /* width: 100%; */
  width: 750px;
}

.contain_header{
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contain_header_title{
  font-size: 40px;
  letter-spacing: 7px;

}
.contain_header_contain{
  font-size: 30px;
  margin-top: 25px;
  letter-spacing: 7px;
}
.contain_section{
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 140px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.contain_section_contain{
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: solid;
  border-top-color:#f1f1f1;
  border-top-width: 1px;
  border-bottom: solid;
  border-bottom-color:#f1f1f1;
  border-bottom-width: 1px;
}
.contain_section_contain_bottom{
  border-top: none;
}
.contain_section_contain_text{
  width: 155px;
}
.contain_section_contain_wrap{
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
}
.contain_section_contain_wrap_input{
  width: 564px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 58px;
  opacity: 0.4;
}
.contain_submit{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 130px;
}
.contain_submit_contain{
  padding: 13px 140px;
  padding-top: 13px;
  padding-left: 140px;
  padding-bottom: 13px;
  padding-right: 140px;
  border-radius: 16px;
  background-color:#ff8400;
}
.contain_submit_title{
  font-size:35px;
  color:#ffffff;
}


.qrcode{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
  padding-top: 15px;
}
.qrcode-text{
  font-size: 30px;
}
.mine-order-icon {
  font-family: iconfont2;
  font-size: 32px!important;
}

</style>



